<template>
    <div class="top">
        <div class="left">
            <div class="toggle" @click="toggleCollapse">
                <el-icon v-if="Menu.isCollapse">
                    <Expand/>
                </el-icon>
                <el-icon v-else>
                    <Fold/>
                </el-icon>
            </div>
        </div>
        <div class="center"/>
        <div class="right">
            <Screenfull/>
            <DarkTheme/>
            <Out/>
        </div>
    </div>
</template>

<script lang='ts' setup>
import DarkTheme from '@/components/Header/darkTheme.vue'
import Screenfull from '@/components/Header/screenfull.vue'
import Out from '@/components/Header/out.vue'
import { Expand, Fold } from '@element-plus/icons-vue'
import { useMenu } from '@/store'

const Menu = useMenu()
const toggleCollapse = () => {
  Menu.changeCollapse()
}
</script>

<style lang='scss' scoped>
.top {
  display: flex;
  justify-content: space-evenly;
  height: $header_height;

  .left {
    .toggle {
      line-height: 0;
      cursor: pointer;
      padding: 15px 0;

      .el-icon {
        font-size: 20px;
      }
    }
  }

  .center {
    flex: 1;
  }

  .right {
    text-align: center;
    display: flex;
    justify-content: space-around;
  }
}
</style>